<!DOCTYPE html>
<html>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">


    {% if title %}
        <title>Docker Web : {{ title }}</title>
    {% else %}
        <title>Docker Web</title>
    {% endif %}

</head>
<body>
{% if current_user.is_authenticated %}
    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4 fixed-top">
        <a class="navbar-brand" href="#">Docker Web Engine</a>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('home') }}">Dashboard<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('images') }}">Images</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('containers') }}">Containers</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('volumes') }}">Volumes</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{{ url_for('networks') }}">Networks</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="navbar-nav ml-auto">
                    <a class="nav-link text-info" href="{{ url_for('change_password') }}">Change Password</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-danger" href="{{ url_for('logout') }}">Logout</a>
                </li>
            </ul>
        </div>
    </nav>
{% endif %}
<div>
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category,message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible col-lg-12">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}
</div>
<div class="container pt-4 mt-5">
    {% block content %}
    {% endblock %}
</div>
<div class=" fixed-bottom text-center bg-dark">
    <small class="text-white">
        &copy; 2019 <a href="#">Docker Web Engine ver. 1.0</a>
        | Powered by Flask
    </small>
</div>

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.12.9/esm/popper.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.12.9/esm/popper.min.js"></script>


</body>
</html>